<template>
	<view>
		<view class="home-banner">
			<view class="user-info">
				<view class="user-avatar"><image :src="avatar" lazy-load="true"></image></view>
				<text class="user-name">{{name}}</text>
				<text class="user-days">情绪记录打卡：{{days}}天</text>
			</view>
			<view class="home-banner-img">
				<text>“我们能够控制，比想象中更多的幸福”</text>
			</view>
		</view>
		<view class="content">
			<view class="column-title">
				<h6>打卡任务</h6>
				<navigator url="/">全部&gt;</navigator>
			</view>
			<view class="task-bar">
				<image :src="taskInfo.image" mode="" class="task-image"></image>
				<view class="task-content">
					<view class="task-content-text">{{taskInfo.content}}</view>
					<view class="task-content-date">{{taskInfo.date}}</view>
				</view>
				<button class="task-btn">去打卡</button>
			</view>
			<view class="column-title">
				<h6>班级最新打卡</h6>
				<navigator url="/">全部&gt;</navigator>
			</view>
			<view class="clock-list">
				<DynamicItem v-for="(item, key) in clockList" :key="key" :dynamic="item"></DynamicItem>
			</view>
		</view>
		<view class="index-nav">
			<view class="index-nav-item" @tap="toClass">
				<image src="../../static/images/icon-class.png" mode=""></image>
				班级
			</view>
			<view class="index-nav-item" @tap="indexNavMyHandle">
				<view class="nav-my" v-if="showMy">
					<navigator url="/pages/my/dynamic">我的动态</navigator>
					<navigator url="/pages/my/medal">我的勋章</navigator>
				</view>
				<image src="../../static/images/icon-my.png" mode=""></image>
				我的
			</view>
		</view>
	</view>
</template>

<script>
	import DynamicItem from "@/components/DynamicItem/DynamicItem"
	export default {
		data() {
			return {
				name: '', 		// 昵称
				avatar: '', 	// 头像
				days: 0, 			// 打卡天数
				taskInfo: {}, // 任务
				clockList: [], // 最新打卡列表
				showMy: false
			}
		},
		components: {
			DynamicItem
		},
		onLoad() {
			this.getUserInfo()
			this.getToDoClockList()
			this.getClockList()
		},
		methods: {
			getUserInfo () {
				this.name = '喵不可言'
				this.dyas = 365
				this.avatar = 'https://img.52z.com/upload/news/image/20180926/20180926123720_24407.jpg'
			},
			getToDoClockList () {
				this.taskInfo = {
					image: 'https://img.52z.com/upload/news/image/20180926/20180926123720_24407.jpg',
					content: '和宝贝睡前讲故事',
					date: '2019-05 09 15:00:00',
					id: '1'
				}
			},
			getClockList () {
				this.clockList = [
					{
						'name': '姓名',
						'avatar': 'https://img.52z.com/upload/news/image/20180926/20180926123720_24407.jpg',
						'mood_num': 100,
						'content': '一条任务内容',
						'date': '2019-05 09 15:00:00',
						'days': 365,
						'images': [
							'https://img.52z.com/upload/news/image/20180926/20180926123720_24407.jpg',
							'https://img.52z.com/upload/news/image/20180926/20180926123720_24407.jpg',
							'https://img.52z.com/upload/news/image/20180926/20180926123720_24407.jpg'
						]
					},
					{
						'name': '姓名',
						'avatar': 'https://img.52z.com/upload/news/image/20180926/20180926123720_24407.jpg',
						'mood_num': 100,
						'content': '一条任务内容',
						'date': '2019-05 09 15:00:00',
						'days': 365,
						'images': [
							'https://img.52z.com/upload/news/image/20180926/20180926123720_24407.jpg',
							'https://img.52z.com/upload/news/image/20180926/20180926123720_24407.jpg',
							'https://img.52z.com/upload/news/image/20180926/20180926123720_24407.jpg'
						]
					}
				]
			},
			indexNavMyHandle() {
				console.log('my')
				this.showMy = !this.showMy
			},
			toClass() {
				uni.navigateTo({
					url: '/pages/class/class'
				});
			}
		}
	}
</script>

<style lang="scss" rel="stylesheet/scss">
@import '@/static/css/base.scss';
.home-banner{
	background:url(~@/static/images/banner-circle.png) no-repeat left bottom; height: 560upx; width: 750upx; background-size: cover; margin-top: -40upx; position: relative; margin-bottom: 40upx;
	.user-info{
		position: absolute;top: 140upx; color: #FFF; text-align: center; width: 100vw;
		.user-avatar{
			width: 163upx; height: 163upx; margin: 0 auto 20upx auto;
			image{width: 163upx; height: 163upx; border-radius: 50%;}
		}
		.user-name{font-size: 36upx; display: block;}
		.user-days{font-size: 26upx;}
	}
	.home-banner-img{
		background: url(~@/static/images/banner.png) no-repeat; width: 676upx; height: 237upx; background-size: cover; position: absolute; top: 350upx; left: 36upx;color: #FDA89E; font-size: 26upx; text-align: center;
		text{top: 180upx; position: relative;}
	}
}



.task-bar{
	box-shadow:-1px 5px 13px 0px rgba(100,224,255,0.48); margin-bottom: 30upx;
	border-radius:8px;
	border:1px solid rgba(229,229,229,1);
	padding: 20upx;
	display: flex;
	align-items: center;
	.task-image{width: 100upx; height: 100upx; border-radius: 50%; margin-right: 26upx;}
	.task-content{
		width: 360upx; margin-right: 20upx;
		.task-content-text{font-size: 26upx; color: $baseColor; margin-bottom: 14upx;}
	 	.task-content-date{font-size: 18upx; color: #999;}
	}
	.task-btn{width: 122upx; height: 50upx; background-color: $baseColor; color: #FFF; font-size: 26upx; border-radius: 8upx; line-height: 50upx; padding: 0;}
}
.index-nav{
	background-color: $baseColor; height: 134upx; position: fixed; bottom: 0; left: 0; width: 100vw; display: flex; justify-content: space-around; color: #FFF; font-size: 26upx; align-items: center;
	.index-nav-item{
		position: relative;
		image{width:60upx; height: 60upx; display: block;}
	}
	.nav-my{
		position: absolute; background-color: $baseColor; color: #FFF; width: 300upx; bottom: 140upx; text-align: center; font-size: 32upx; left: -126upx; padding: 20upx 0;
		navigator{padding: 10upx  0}
		&::after{display: block; content: ""; position: absolute; background: url(~@/static/images/sj.png) no-repeat; width: 39upx; height: 20upx; bottom: -20upx; left: 50%; background-size: cover; margin-left: -20upx;}
	}
}
</style>
